<template>
	<view class="container">
		<u-navbar title="圈子" :is-back="false" :border-bottom="false">
			<u-icon slot="right" name="plus-circle" v-on:click="navigatePublishring()"></u-icon>
		</u-navbar>
		<u-tabs-swiper ref="ringtabs" :list="ringtabList" gutter="80" inactive-color="rgba(136, 136, 136, 1)" active-color="rgba(255, 158, 93, 1)" :current="tabcurrent" @change="tabsChoose" :is-scroll="false"></u-tabs-swiper>
		<view class="line"></view>
		<swiper :style="{height:scrollviewHeight+'rpx'}" style="width: 100%;" :current="tabcurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item>
				<view class="ringList">
					<scroll-view scroll-y="true" :style="{height:scrollviewHeight+'rpx'}" style="width: 100%;">
						<view class="ringitem">
							<view class="ring-user">
								<view class="ring-user-left">
									<u-avatar src="/static/avatar.jpg" size="100"></u-avatar>
									<text class="username">开发区吴彦祖</text>
								</view>
								<view class="gzbtn">
									<text>关注</text>
								</view>
							</view>
							<view class="ring-text">
								<text class="ring-text-content">新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。</text>
							</view>
							<view class="trendsimages oneimg" >
								<image src="/static/img_156.png"></image>
							</view>
							<view class="trendsbtns">
								<view class="btnitem firstbtn">
									<u-icon name="heart" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>87</text>
								</view>
								<view class="btnitem">
									<u-icon name="star" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>125</text>
								</view>
								<view class="btnitem"  v-on:click="openTrendscommitsList()">
									<u-icon name="chat" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>125</text>
								</view>
								<view class="btnitem" v-on:click="shareThistrends(0)">
									<u-icon name="zhuanfa" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>分享</text>
								</view>
							</view>
						</view>
						<view class="ringitem">
							<view class="ring-user">
								<view class="ring-user-left">
									<u-avatar src="/static/avatar.jpg" size="100"></u-avatar>
									<text class="username">开发区吴彦祖</text>
								</view>
								<view class="gzbtn">
									<text>关注</text>
								</view>
							</view>
							<view class="ring-text">
								<text class="ring-text-content">新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。</text>
							</view>
						</view>
						<view class="ringitem">
							<view class="ring-user">
								<view class="ring-user-left">
									<u-avatar src="/static/avatar.jpg" size="100"></u-avatar>
									<text class="username">开发区吴彦祖</text>
								</view>
								<view class="gzbtn">
									<text>关注</text>
								</view>
							</view>
							<view class="ring-text">
								<text class="ring-text-content">新装修第二改水电，规划好水电和管工就可以干活了，哪个地方放电视、冰箱、空调、插座和电源等。</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</swiper-item>
			<!-- 关注列表 -->
			<swiper-item>
				<view class="ringList">
					<scroll-view scroll-y="true" :style="{height:scrollviewHeight+'rpx'}" style="width: 100%;">
						<view class="ringitem" v-for="(followItem,followIndex) in followList" :key='followIndex'>
							<view class="ring-user">
								<view class="ring-user-left">
									<u-avatar :src="followItem.headOrtrait" size="100"></u-avatar>
									<text class="username">{{followItem.name}}</text>
								</view>
								<view class="ygzbtn">
									<text>已关注</text>
								</view>
							</view>
							<view class="ring-text">
								<text class="ring-text-content">{{followItem.content}}</text>
							</view>
							<view class="trendsimages oneimg" >
								<image src="/static/img_156.png"></image>
							</view>
							<view class="trendsbtns">
								<view class="btnitem firstbtn" @tap='giveUpTap(followItem.id,2,followItem.isthumb,followIndex)'>
									<u-icon name="heart-fill" size="35" color="#ff5353" v-if="followItem.isthumb=='1'"></u-icon>
									<u-icon name="heart" size="35" color="rgba(136, 136, 136, 1)" v-else></u-icon>
									<text>{{followItem.countGive}}</text>
								</view>
								<view class="btnitem" @tap='collectionTap(followItem.id,2,followItem.isCollection,followIndex)'>
									<u-icon name="star-fill" size="35" color="#f79e36" v-if="followItem.isCollection=='1'"></u-icon>
									<u-icon name="star" size="35" color="rgba(136, 136, 136, 1)" v-else></u-icon>
									<text>{{followItem.countCollection}}</text>
								</view>
								<view class="btnitem"  v-on:click="openTrendscommitsList()">
									<u-icon name="chat" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>{{followItem.countComment}}</text>
								</view>
								<view class="btnitem" v-on:click="shareThistrends(0)">
									<u-icon name="zhuanfa" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>分享</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</swiper-item>
			<!-- 用户圈 -->
			<swiper-item>
				<view class="ringList">
					<scroll-view scroll-y="true" :style="{height:scrollviewHeight+'rpx'}" style="width: 100%;">
						<view class="ringitem" v-for="(userItem,userIndex) in userCircleList" :key='userIndex'>
							<view class="ring-user">
								<view class="ring-user-left">
									<u-avatar :src="userItem.headOrtrait" size="100"></u-avatar>
									<text class="username">{{userItem.name}}</text>
								</view>
								<view class="gzbtn" @tap='followTap(userItem.userId)'>
									<text>关注</text>
								</view>
							</view>
							<view class="ring-text">
								<text class="ring-text-content">{{userItem.content}}</text>
							</view>
							<view class="trendsimages oneimg" >
								<image src="/static/img_156.png"></image>
							</view>
							<view class="trendsbtns">
								<view class="btnitem firstbtn" @tap='giveUpTap(userItem.id,1,userItem.isthumb,userIndex)'>
									<u-icon name="heart-fill" size="35" color="#ff5353" v-if="userItem.isthumb=='1'"></u-icon>
									<u-icon name="heart" size="35" color="rgba(136, 136, 136, 1)" v-else></u-icon>
									<text>{{userItem.countGive}}</text>
								</view>
								<view class="btnitem" @tap='collectionTap(userItem.id,1,userItem.isCollection,userIndex)'>
									<u-icon name="star-fill" size="35" color="#f79e36" v-if="userItem.isCollection=='1'"></u-icon>
									<u-icon name="star" size="35" color="rgba(136, 136, 136, 1)" v-else></u-icon>
									<text>{{userItem.countCollection}}</text>
								</view>
								<view class="btnitem"  v-on:click="openTrendscommitsList(userItem.id)">
									<u-icon name="chat" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>{{userItem.countComment}}</text>
								</view>
								<view class="btnitem" v-on:click="shareThistrends(0)">
									<u-icon name="zhuanfa" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>分享</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</swiper-item>
			<!-- 工匠圈 -->
			<swiper-item>
				<view class="ringList">
					<scroll-view scroll-y="true" :style="{height:scrollviewHeight+'rpx'}" style="width: 100%;">
						<view class="ringitem" v-for="(craftsmanItem,craftsmanIndex) in craftsmanCircleList" :key='craftsmanIndex'>
							<view class="ring-user">
								<view class="ring-user-left">
									<u-avatar :src="craftsmanItem.headOrtrait" size="100"></u-avatar>
									<text class="username">{{craftsmanItem.name}}</text>
								</view>
								<view class="gzbtn">
									<text>关注</text>
								</view>
							</view>
							<view class="ring-text">
								<text class="ring-text-content">{{craftsmanItem.content}}</text>
							</view>
							<view class="trendsimages oneimg" >
								<image src="/static/img_156.png"></image>
							</view>
							<view class="trendsbtns">
								<view class="btnitem firstbtn" @tap='giveUpTap(craftsmanItem.id,2,craftsmanItem.isthumb,craftsmanIndex)'>
									<u-icon name="heart-fill" size="35" color="#ff5353" v-if="craftsmanItem.isthumb=='1'"></u-icon>
									<u-icon name="heart" size="35" color="rgba(136, 136, 136, 1)" v-else></u-icon>
									<text>{{craftsmanItem.countGive}}</text>
								</view>
								<view class="btnitem" @tap='collectionTap(craftsmanItem.id,2,craftsmanItem.isCollection,craftsmanIndex)'>
									<u-icon name="star-fill" size="35" color="#f79e36" v-if="craftsmanItem.isCollection=='1'"></u-icon>
									<u-icon name="star" size="35" color="rgba(136, 136, 136, 1)" v-else></u-icon>
									<text>{{craftsmanItem.countCollection}}</text>
								</view>
								<view class="btnitem"  v-on:click="openTrendscommitsList()">
									<u-icon name="chat" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>{{craftsmanItem.countComment}}</text>
								</view>
								<view class="btnitem" v-on:click="shareThistrends(0)">
									<u-icon name="zhuanfa" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>分享</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="ringList">
					<scroll-view scroll-y="true" :style="{height:scrollviewHeight+'rpx'}" style="width: 100%;">
						<view class="ringitem" v-for="(collectItem,collectIndex) in collectList" :key='collectIndex'>
							<view class="ring-user">
								<view class="ring-user-left">
									<u-avatar :src="collectItem.headOrtrait" size="100"></u-avatar>
									<text class="username">{{collectItem.name}}</text>
								</view>
								<view class="gzbtn" @tap='followTap(collectItem.userId)'>
									<text>关注</text>
								</view>
							</view>
							<view class="ring-text">
								<text class="ring-text-content">{{collectItem.content}}</text>
							</view>
							<view class="trendsimages oneimg" >
								<image src="/static/img_156.png"></image>
							</view>
							<view class="trendsbtns">
								<view class="btnitem firstbtn" @tap='giveUpTap(collectItem.id,1,collectItem.isthumb,collectIndex)'>
									<u-icon name="heart-fill" size="35" color="#ff5353" v-if="collectItem.isthumb=='1'"></u-icon>
									<u-icon name="heart" size="35" color="rgba(136, 136, 136, 1)" v-else></u-icon>
									<text>{{collectItem.countGive}}</text>
								</view>
								<view class="btnitem" @tap='collectionTap(collectItem.id,1,collectItem.isCollection,collectIndex)'>
									<u-icon name="star-fill" size="35" color="#f79e36" v-if="collectItem.isCollection=='1'"></u-icon>
									<u-icon name="star" size="35" color="rgba(136, 136, 136, 1)" v-else></u-icon>
									<text>{{collectItem.countCollection}}</text>
								</view>
								<view class="btnitem"  v-on:click="openTrendscommitsList()">
									<u-icon name="chat" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>{{collectItem.countComment}}</text>
								</view>
								<view class="btnitem" v-on:click="shareThistrends(0)">
									<u-icon name="zhuanfa" size="35" color="rgba(136, 136, 136, 1)"></u-icon>
									<text>分享</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 圈子动态评论列表 弹出层 -->
		<u-popup v-model="showTrendscommitsList" mode="bottom" border-radius="20" :closeable="true" height="auto" close-icon-pos="top-left">
			<text class="commitslist-title">全部评论{{commitList.length}}条</text>
			<view class="commitslist">
				<scroll-view scroll-y="true" :style="{height:800+'upx',width:'100%',paddingBottom:'20upx'}">
					<view class="commititem" v-for="(commititem,commitindex) in commitList" :key='commitindex'>
						<!-- 评论信息 -->
						<view class="commitinfo">
							<u-avatar :src="commititem.headOrtrait" size="100"></u-avatar>
							<view class="commits">
								<view class="commit-user-dz">
									<text class="commit-user">{{commititem.userName}}</text>
									<view class="commitdz">
										<text>{{commititem.dianzanUpNum}}</text>
										<u-icon name="heart-fill" size="35" color="#ff5353" v-if="commititem.isWhether=='1'"></u-icon>
										<u-icon name="heart" size="35" color="rgba(136, 136, 136, 1)" v-else></u-icon>
									</view>
								</view>
								<view style="width: 100%;">
									<text class="commit-time">{{commititem.creationTime}}</text>
									<text class="commit-text">{{commititem.content}}</text>
								</view>
								<!-- 评论回复 -->
								<view class="replys" v-for="replyitem in 2">
									<u-avatar src="/static/avatar.jpg"  size="70"></u-avatar>
									<view class="replayinfo">
										<view class="replys-user-dz">
											<text class="commit-user">李三</text>
											<view class="commitdz">
												<text>99+</text>
												<u-icon name="heart" size="30"></u-icon>
											</view>
										</view>
										<view style="width: 100%;">
											<text class="commit-time">2020-09-04</text>
											<text class="commit-text">请问这是哪家的装修设计啊，厉害风格！请问这是哪家的装修设计啊，厉害风格！</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="sendcommits">
				<textarea placeholder="我来说两句" maxlength="-1"/>
				<view class="sendbtn">
					<text>发送</text>
				</view>
			</view>
		</u-popup>
		<!-- 动态分享 弹出层 -->
		<u-popup v-model="showSharemodal" border-radius="20" mode="bottom">
			<view class="shareprovides">
				<view class="provideitem" v-for="provideitem in shareProvides" :key="provideitem.provide">
					<view class="provideicon">
						<image :src="provideitem.icon" mode=""></image>
					</view>
					<text>{{provideitem.name}}</text>
				</view>
			</view>
			<view class="cancelshare" v-on:click="closeSharemodal()">
				<text>取消</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {appUserCirclePage,collectionList,addAppUserCircleById,addAppGiveup,addFollowList,addFollow,appCollectionList,appEvaluateList} from '@/apis/request.js'
	export default {
		data() {
			return {
				ringtabList:[{
					name:'推荐'
				},{
					name:'关注'
				},{
					name:'用户圈'
				},{
					name:'工匠圈'
				},{
					name:'收藏'
				}],
				scrollviewHeight:0,
				tabcurrent:0,
				showTrendscommitsList:false,
				showSharemodal:false,
				shareProvides:[{
					provide:'weixin',
					icon:'/static/weixin.png',
					name:'微信好友'
				},{
					provide:'friendsring',
					icon:'/static/friendring.png',
					name:'朋友圈'
				},{
					provide:'qq',
					icon:'/static/qq.png',
					name:'QQ'
				},{
					provide:'weibo',
					icon:'/static/weibo.png',
					name:'新浪微博'
				}],
				pageIndex:1,
				pageSize:6,
				userCircleList:[],
				craftsmanCircleList:[],
				followList:[],
				collectList:[],
				commitList:[],
				userInfo:'',
				ifStart:false,
				lock:true,
				likeLock:true
			};
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			console.log(this.userInfo)
		},
		created() {
			this.scrollviewHeight=(uni.getSystemInfoSync().windowHeight-44)/uni.getSystemInfoSync().windowWidth*750-100;
		},
		methods:{
			// 点击tabs
			tabsChoose(e){
				this.tabcurrent = e
				switch(e){
					case 0:
						break;
					case 1:
						this.getFollowList(1)
						break;
					case 2:
						this.getYongGongList(1)
						break;
					case 3:
						this.getYongGongList(2)
						break;
					case 4:
						this.getCollectList(1)
						break;
					default:
					  break;
				}
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				// this.$refs.ringtabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.ringtabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				// this.tabcurrent = current;s
			},
			//打开动态评论列表弹出层
			openTrendscommitsList(id){
				this.showTrendscommitsList=true;
				this.$http({
					url:appEvaluateList,
					method:'GET',
					data:{
						circleId:id
					},
					header:{
						'Token':this.userInfo.token||''
					}
				})
				.then(res=>{
					console.log(res,'回复列表')
					this.commitList = res[1].data.data
				})
			},
			//打开分享弹框
			shareThistrends(){
				this.showSharemodal=true;
			},
			closeSharemodal(){
				this.showSharemodal=false;
			},
			navigatePublishring(){
				uni.navigateTo({
					url:'publishring/publishring'
				})
			},
			// 收藏列表
			getCollectList(collectBottom){
				this.$http({
					url:appCollectionList,
					method:'GET',
					header:{
						'Token':this.userInfo.token||''
					}
				})
				.then(res=>{
					console.log(res,'收藏列表')
					if(res[1].data.status ==='200'){
						if(collectBottom===0){
							this.collectList = this.collectList.concat(res[1].data.data)
						}else{
							this.collectList =res[1].data.data
						}
						
					}
				})
			},
			// 关注
			followTap(id){
				this.$http({
					url:addFollow,
					data:{
						twoUserId:id
					},
					header:{
						'Token':this.userInfo.token||''
					}
				})
				.then(res=>{
					console.log(res,'关注')
				})
			},
			// 获取关注列表
			getFollowList(ifBottom){
				this.$http({
					url:addFollowList,
					method:'GET',
					data:{
						pageIndex:this.pageIndex,
						pageSize:this.pageSize,
					},
					header:{
						'Token':this.userInfo.token||''
					}
				})
				.then(res=>{
					console.log(res,'关注列表')
					if(res[1].data.status ==='200'){
						if(ifBottom===0){
							this.followList = this.followList.concat(res[1].data.data)
						}else{
							this.followList =res[1].data.data
						}
						
					}
				})
			},
			// 获取用户圈，工匠圈数据
			getYongGongList(type){
				this.$http({
					url:appUserCirclePage,
					method:'GET',
					data:{
						pageIndex:this.pageIndex,
						pageSize:this.pageSize,
						type:type
					},
					header:{
						'Token':this.userInfo.token||''
					}
				})
				.then(res=>{
					console.log(res,'用户/工匠圈')
					if(res[1].data.status ==='200'){
						if(type===1){
							this.userCircleList = this.userCircleList.concat(res[1].data.data)
						}else if(type===2){
							if(res[1].data.data.length!=0){
								this.craftsmanCircleList = this.craftsmanCircleList.concat(res[1].data.data)
							}
							
						}
					}
				})
			},
			// 点赞
			giveUpTap(id,type,isthumb,index){
				var giveTine='',likeTime=''
				if(this.userInfo==''){
					uni.showToast({
						title:'您还没有登录',
						icon:'none'
					})
					clearTimeout(giveTine)
					giveTine = setTimeout(function(){
						uni.navigateTo({
							url:'../login/login'
						})
					},1500)
				}else{
					if(this.likeLock){
						this.likeLock = false
						var whether = ''
						if(isthumb==='1'){
							whether = 2
						}else{
							whether = 1
						}
						console.log(whether)
						this.$http({
							url:addAppGiveup,
							data:{
								circleId:id,
								type:type,
								isWhether:whether
							},
							header:{
								'content-type':'application/x-www-form-urlencoded',
								'Token':this.userInfo.token||''
							}
						})
						.then(res=>{
							console.log(res,'点赞')
							if(res[1].data.status ==='200'){
								if(type===1){
									if(whether===1){
										whether = 2
										this.userCircleList[index].countGive++
										this.userCircleList[index].isthumb = '1'
									}else{
										whether = 1
										this.userCircleList[index].countGive--
										this.userCircleList[index].isthumb = '0'
									}
								}else if(type===2){
									if(whether===1){
										whether = 2
										this.craftsmanCircleList[index].countGive++
										this.craftsmanCircleList[index].isthumb = '1'
									}else{
										whether = 1
										this.craftsmanCircleList[index].countGive--
										this.craftsmanCircleList[index].isthumb = '0'
									}
								}
								
							}
						})
						clearTimeout(likeTime)
						likeTime=setTimeout(()=>{
							this.likeLock = true
						},2000)
					}
				}
			},
			// 收藏
			collectionTap(id,type,isCollection,index){
				var timmer = '',timeouter=''
				if(this.userInfo==''){
					uni.showToast({
						title:'您还没有登录',
						icon:'none'
					})
					clearTimeout(timmer)
					timmer = setTimeout(function(){
						uni.navigateTo({
							url:'../login/login'
						})
					},1500)
				}else{
					if(this.lock){
						this.lock = false
						var collection = ''
						if(isCollection==='1'){
							collection = 2
						}else{
							collection = 1
						}
						console.log(collection)
						this.$http({
							url:collectionList,
							data:{
								circleId:id,
								type:type,
								isCollection:collection
							},
							header:{
								'content-type':'application/x-www-form-urlencoded',
								'Token':this.userInfo.token||''
							}
						})
						.then(res=>{
							console.log(res,'收藏')
							if(res[1].data.status ==='200'){
								if(type===1){
									if(collection===1){
										collection = 2
										this.userCircleList[index].countCollection++
										this.userCircleList[index].isCollection = '1'
										uni.showToast({
											title:'收藏成功',
											icon:'none'
										})
									}else{
										collection = 1
										this.userCircleList[index].countCollection--
										this.userCircleList[index].isCollection = '0'
									}
								}else if(type===2){
									if(collection===1){
										collection = 2
										this.craftsmanCircleList[index].countCollection++
										this.craftsmanCircleList[index].isCollection = '1'
										uni.showToast({
											title:'收藏成功',
											icon:'none'
										})
									}else{
										collection = 1
										this.craftsmanCircleList[index].countCollection--
										this.craftsmanCircleList[index].isCollection = '0'
									}
								}
								
							}
						})
						clearTimeout(timeouter)
						timeouter=setTimeout(()=>{
							this.lock = true
						},2000)
					}
				}
			}
		}
	}
</script>

<style lang="scss">
    page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		height: 100%;
		.line{
			width: 100%;
			height: 20rpx;
			background-color: rgba(244, 248, 251, 1);
		}
		.ringList{
			width: 100%;
			height: 100%;
			.ringitem{
				width: 660rpx;
				margin: auto;
				height: auto;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #F1F1F1;
				padding-top: 30rpx;
				.ring-user{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.ring-user-left{display: flex;height: auto;align-items: center;flex: 1;}
					.username{margin-left: 20rpx;font-size: 28rpx;}
					.gzbtn{border:1rpx solid #ccc;padding:10rpx 15rpx;font-size: 27rpx;border-radius: 10rpx;}
					.ygzbtn{background-color: #f4f8fb;padding:10rpx 15rpx;font-size: 27rpx;border-radius: 10rpx;color: #cfd2d4;}
				}
				.ring-text{
					width: 100%;
					height: auto;
					font-size: 28rpx;
					color: rgba(34, 34, 34, 1);
					margin-top: 20rpx;
					.ring-text-content{width: 100%;}
				}
				.trendsimages{width: 100%;height:auto;margin-top: 30upx;display: flex;flex-wrap: wrap;justify-content: space-between;}
				.oneimg image{
					width: 300upx;
					height: 500upx;
				}
				.twoimg image{
					width: 335upx;
					height: 250upx;
				}
				.moreimg image{
					width: 220upx;
					height: 235upx;
				}
				.trendsbtns{
					width: 100%;
					margin-top: 30upx;
					display: flex;
					align-items: center;
				}
				.btnitem{
					margin-left: 30upx;
					display: flex;
					align-items: center;
					text{margin-left: 10upx;color: rgba(136, 136, 136, 1);}
				}
				.firstbtn{
					margin-left: 0upx;
				}
			}
		}
		.commitslist-title{
			font-size: 30upx;
			font-weight: bold;
			display: block;
			width: 100%;
			text-align: center;
			line-height: 80upx;
		}
		.commitslist{
			width: 690upx;
			margin:auto;
			height: auto;
			.commititem{
				width: 100%;
				height: auto;
				margin-top: 30upx;
			}
			.commitinfo{
				width: 100%;
				height: auto;
				display: flex;
				flex-wrap: wrap;
			}
			.commits{
				width: 570rpx;
				text{
					display: block;
					word-break: break-all;
				}
				margin-left: 20rpx;
			}
			.commit-time{
				font-size: 25upx;
				color: rgba(136, 136, 136, 1);
				margin-top: 15upx;
			}
		   .commit-text{
				font-size: 28upx;
				margin-top: 15upx;
				color: rgba(34, 34, 34, 1);
			}
			.commitdz{
				display: flex;
				align-items: center;
			}
			.commit-user-dz{
				display: flex;
				width: 100%;
				justify-content: space-between;
				font-size: 30upx;
				color: rgba(136, 136, 136, 1);
			}
		}
		.sendcommits{
			width: 690upx;
			height: auto;
			margin: auto;
			margin-bottom: 15upx;
			display: flex;
			textarea{
				font-size: 28upx;
				padding: 15upx;
			    background-color: #fff;
				width: 580upx;
				min-height: 60upx;
                max-height: 150upx;
			}
					 
			    align-items: center;
				.sendbtn{
				    font-size: 28upx;
				    color: rgba(136, 136, 136, 1);
					margin-left: 20upx;
				}
		}
		.replys{
				display: flex;
				flex: 1;
				flex-wrap: wrap;
				width: 100%;
				text{
					display: block;
					word-break: break-all;
				}
				margin-top: 10rpx;
		}
		.replys-user-dz{
				width: 100%;
				display: flex;
			    flex: 1;
				justify-content: space-between;
				font-size: 30upx;
				color: rgba(136, 136, 136, 1);
		}
		.replayinfo{
				display:flex;
				flex: 1;
				width: 100%;
				margin-left: 10rpx;
				flex-wrap: wrap;
		}
		.cancelshare{
				width: 100%;
				height: 80upx;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30upx;
		}
		.shareprovides{
		    width: 680upx;
			height: auto;
			padding-top: 120upx;
			padding-bottom: 150upx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			.provideitem{
				width: 120upx;
				height: auto;
				display: flex;
				flex-wrap:wrap;
				justify-content: center;
				text{
					color: rgba(34, 34, 34, 1);
					margin-top: 20upx;
					font-size: 28upx;
				}
			}
		}
		.provideicon{
			width: 120upx;
			height: 120upx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 100%;
			background-color: #FFFFFF;
			image{
				width: 70upx;
				height: 70upx;
			}
		}
	}
</style>
